<template>
  <el-dropdown :placement="placement" :size="size" :trigger="trigger" @command="handleCommand">
    <div style="width: 100%">
      <slot v-if="$slots.default" />
      <span class="el-dropdown-link" v-else>
        {{ title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :command="item" v-for="(item, index) in options" :key="index" :style="{
          width: typeof width === 'number' ? `${width}px` : width,
        }">
          <el-icon :size="item.size" :color="item.color" v-if="item.icon">
            <component :is="item.icon"></component>
          </el-icon>
          <p>{{ item.label }}</p>
          <el-icon v-if="isRight">
            <ArrowRight />
          </el-icon>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    title?: string; //按钮名称
    size?: string; //按钮名称 '' | 'large' | 'default' | 'small'
    trigger?: string; //切换方式 'hover' | 'click' | 'contextmenu'
    placement?: string; //位置 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
    width?: number | string; //宽度
    options?: any;
    isRight?: boolean;
  }>(),
  {
    options: [],
    trigger: 'hover',
    title: '按钮名称',
    size: 'default',
  },
);
const handleCommand = (command: any) => {
  if (command.click && typeof command.click === 'function') {
    command.click(command);
  }
};
</script>
<style scoped></style>
